<template>
  <div id="Section">
    <div class="container-box">
      <ul class="clearfix">
        <li class="tag-a ml42 mr42" v-for="value in items" :key="value.id" @click="$router.push({name:'Detail',query:{id:value.id}})">
          <div class="picture">
            <div class="picture-box">
              <img :src="value.imgs.split(',')[0]" alt>
            </div>
          </div>
          <p class="title mt4">{{value.productName}}</p>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  name: "Section",
  props:["items"],
  methods: {
    goto(id) {
      this.$router.push("/list");
    }
  }
};
</script>

<style scoped>
#Section {
  width: 100%;
  margin-bottom: 5%;
  /* height: 189px; */
  /* background-color: rgb(243, 210, 167); */
}
.container-box {
  width: 1080px;
  padding-top: 30px;
  height: 100%;
  margin: 0 auto;
  border-bottom-width: 1px;
  border-bottom-style: solid;
  border-bottom-color: rgb(231, 231, 231);
  /* background-color: aquamarine; */
}
.clearfix {
  height: 200px;
  overflow: hidden;
  padding-bottom: 10px;
  /* background-color: coral; */
}
li {
  list-style: none;
}
.tag-a {
  float: left;
  width: 130px;
  height: 143px;
  /* margin-right: 107px; */
  /* margin-right: 42px;
  margin-left: 42px; */
  cursor: pointer;
  opacity: 0.7;
}

.tag-a:hover {
  opacity: 1;
}

.tag-a .picture {
  width: 130px;
  height: 120px;
  overflow: hidden;
}
.tag-a .picture .picture-box {
  padding: 25px 25px 15px;
  width: 80px;
  height: 80px;
  overflow: hidden;
  display: inline-block;
  /* background-color: blueviolet; */
}
.tag-a .picture .picture-box img {
  width: 80px;
  height: 80px;
  vertical-align: middle;
  border: none;
}
.tag-a .title {
  font-size: 14px;
  /* margin-top: 4px; */
  width: 130px;
  height: 19px;
  text-align: center;
  color: rgb(85, 86, 102);
  /* background-color: cornflowerblue; */
}
</style>
